// 中心图片
.center-img {
  position: fixed;
  left: 7.0313vw;
  top: 4.4271vw;
  width: 85.9896vw;
  height: 39.5313vw;
}

.bg1 {
  position: fixed;
  left: 26.0104vw;
  top: 24.75vw;
  width: 22.9688vw;
  height: 3.6458vw;
}

.bg2 {
  position: fixed;
  right: 24.5938vw;
  top: 24.75vw;
  width: 22.9688vw;
  height: 3.6458vw;
}

// 中心标题
.center-title1 {
  position: fixed;
  left: 29.9687vw;
  top: 9.4271vw;
  width: 15.1042vw;
  height: 2.6563vw;
}
.center-title2 {
  position: fixed;
  right: 28.5vw;
  top: 9.4271vw;
  width: 15.1042vw;
  height: 2.6563vw;
}

// 底部图片
.footer {
  position: fixed;
  top: 46.875vw;
  left: 14.5833vw;
  width: 70.7813vw;
  height: 11.0417vw;
}

// 卡片公共样式------------
.box {
  display: flex;
  position: fixed;
  width: 26.5625vw;
  height: 18.1771vw;

  // 价格
  .price {
    position: absolute;
    top: -1.875vw;
    left: 50%;
    transform: translateX(-50%);
    color: #62DBED;
    font-size: 0.8333vw;
  }

  // 柱
  .column1 {
    position: absolute;
    bottom: 1.6667vw;
    // left: 1.0417vw;
    left: 50%;
    transform:translateX(-50%);
    width: 1.5625vw;
    height: 6.875vw;
    background: linear-gradient(180deg,#b6b6b6, rgba(216,216,216,0.00));

    &::before {
      content: '';
      position: absolute;
      top: -0.4167vw;
      left: 0;
      width: 1.5625vw;
      height: 0.7813vw;
      background: linear-gradient(180deg,#c0c0c0, #8e8e8e 57%, #585858);
      border-radius: 50%;
    }

    &::after {
      content: '';
      position: absolute;
      bottom: -0.4167vw;
      left: 0;
      width: 1.5625vw;
      height: 0.7813vw;
      background: linear-gradient(180deg,#767676, rgba(80,80,80,0.70));;
      border-radius: 50%;
    }
  }

  .column2 {
    position: absolute;
    bottom: 1.6667vw;
    // left: 1.0417vw;
    left: 50%;
    transform:translateX(-50%);
    width: 1.5625vw;
    height: 3.125vw;
    background: linear-gradient(180deg,#00feee, rgba(103,236,228,0.53) 48%, rgba(216,216,216,0.00));

    &::before {
      content: '';
      position: absolute;
      top: -0.4167vw;
      left: 0;
      width: 1.5625vw;
      height: 0.7813vw;
      background: linear-gradient(180deg,#00feee, #02ecd9 57%, #07b0fe);
      border-radius: 50%;
    }

    &::after {
      content: '';
      position: absolute;
      bottom: -0.4167vw;
      left: 0;
      width: 1.5625vw;
      height: 0.7813vw;
      background: linear-gradient(180deg,#397d90, #0a497e);
      border-radius: 50%;
    }
  }

  // 信息
  .info {
    position: absolute;
    bottom: 0;
    color: #fff;
    font-size: 0.625vw;
  }

  .center1 {
    position: absolute;
    left: 2.8125vw;
    bottom: 3.8542vw;
    width: 3.125vw;
    height: 2.8646vw;
  }

  .center2 {
    position: absolute;
    left: 0;
    bottom: 2.1875vw;
    width: 10vw;
    height: 1.1458vw;
  }

  .number {
    position: absolute;
    left: 4.5729vw;
    bottom: 5.9896vw;
    color: #F7B12A;
    font-size: 1.25vw;
    font-weight: 700;
    font-family: DIN Alternate, DIN Alternate-Bold;
  }

  .left {
    position: absolute;
    left: 4.1667vw;
    bottom: 2.8125vw;
    height: 10.4167vw;
    width: 3.9063vw;
  }

  .center {    
    position: absolute;
    left: 8.1771vw;
    bottom: 2.8125vw;
    width: 10vw;
    height: 10.4167vw;
  }

  .right {
    position: absolute;
    right: 4.4271vw;
    bottom: 2.8125vw;
    height: 10.4167vw;
    width: 3.9063vw;

    .info {
    text-indent: 0.5208vw;
    }
  }
}

.box1 {
  left: 6.25vw;
  top: 34.7917vw;
  background: url('../images/Group\ 91@2x.png') 0 0/cover;
}

.box2 {
  left: 24.0104vw;
  top: 12.0208vw;

  .column1 {
    width: 2.3438vw;
    height: 10.2604vw;

    &::before {
      width: 2.3438vw;
      height: 1.1979vw;
      top: -0.625vw;
    }

    &::after {
      width: 2.3438vw;
      height: 1.1979vw;
      bottom: -0.625vw;
    }
  }

  .column2 {
    width: 2.3438vw;
    height: 5.625vw;

    &::before {
      width: 2.3438vw;
      height: 1.1979vw;
      top: -0.625vw;
    }

    &::after {
      width: 2.3438vw;
      height: 1.1979vw;
      bottom: -0.625vw;
    }
  }

  .center1 {
    width: 5.6771vw;
    height: 5.2083vw;
    left: 1.7188vw;
  }

  .number {
    left: 4.9896vw;
    bottom: 8.3333vw;
    font-size: 1.6667vw;
  }

  
}

.box3 {
  right: 6.25vw;
  top: 34.7917vw;
  background: url('../images/Group\ 91_2@2x.png') 0 0 / cover;
}

.box4 {
  left: 36.7188vw;
  top: 34.4792vw;
  background: url('../images/Group\ 91_1@2x.png') 0 0 / cover;
}


.box {

  &.box1 {
    .column1 {
      height: 8.875vw * (18277/20000);
    }
    .column2 {
      height: 8.875vw * (13200/20000);
    }
  }

  &.box2 {
    .column1 {
      height: 12vw * (23328/30000);
    }
    .column2 {
      height: 12vw * (17519/30000);
    }
  }

  &.box3 {
    .column1 {
      height: 8.875vw * (398/450);
    }
    .column2 {
      height: 8.875vw * (348/450);
    }
  }

  &.box4 {
    .column1 {
      height: 8.875vw * (4153/5000);
    }
    .column2 {
      height: 8.875vw * (3472/5000);
    }
  }

}

.box5 {
  width: 22.9688vw;
  height: 13.0208vw;
  position: fixed !important;
  right: 23vw;
  top: 14vw;
  z-index: 999;
}